<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
  <title>9-2-dynamic-segment</title>
</head>
<body>
<div id='app'>
  <ul>
    <li><router-link to='/user/1'>用户1</router-link></li>
    <li><router-link to='/user/2'>用户2</router-link></li>
    <li><router-link to='/user/evan/post/3'>用户evan</router-link></li>
    <li><router-link to='/user/jack/abc/4'>用户jack</router-link></li>
  </ul>
  <router-view></router-view>
</div>
<script src='../lib/vue.global.js'></script>
<script src='../lib/vue-router.global.js'></script>
<script>
  const {createApp} = Vue
  const {createRouter, createWebHashHistory} = VueRouter

  const User = {
    template: `<div>用户id: {{ $route.params.id }}</div>
      <div>用户名: {{ $route.params.username }}</div>
      <div>chapters: {{ $route.params.chapters }}</div>`,
    watch: {
      $route(to, from) {
        console.log(to, from)
      }
    }
  }
  const router = createRouter({
    history: createWebHashHistory(),
    routes: [
      {path: '/user/:id', component: User},
      {path: '/user/:username/post/:id', component: User},
      {path: '/:chapters*', component: User}
    ]
  })

  const app = createApp({})
  app.use(router)
  app.mount('#app')

</script>
</body>
</html>
